<template>
  <div>
    <div class="header-wrap">
      <el-menu
        :default-active="activeIndex"
        style="padding-left: 15%"
        background-color="deepskyblue"
        mode="horizontal"
        text-color="#fff"
      >
        <el-menu-item index="1"
          ><router-link :to="{ name: 'ClubIndex' }" tag="div"
            >首页</router-link
          ></el-menu-item
        >
        <el-menu-item index="2"
          ><router-link :to="{ name: 'ClubShow' }" tag="div"
            >社团展示</router-link
          ></el-menu-item
        >
        <el-submenu index="3">
          <template slot="title"> 社团快讯 </template>
          <el-menu-item index="3-1"
            ><router-link
              :to="{ name: 'PassageList', query: { passageTypeId: 1 } }"
              tag="div"
              >重要通知</router-link
            ></el-menu-item
          >
          <el-menu-item index="3-2"
            ><router-link
              :to="{ name: 'PassageList', query: { passageTypeId: 2 } }"
              tag="div"
              >社团要闻</router-link
            ></el-menu-item
          >
          <el-menu-item index="3-3"
            ><router-link
              :to="{ name: 'PassageList', query: { passageTypeId: 1 } }"
              tag="div"
              >重要通知</router-link
            ></el-menu-item
          >
        </el-submenu>
        <el-submenu index="4">
          <template slot="title"> 社团风采 </template>
          <el-menu-item index="4-1"
            ><router-link
              :to="{ name: 'ActivityList', query: { typeId: 1 } }"
              tag="div"
              >活动预告</router-link
            ></el-menu-item
          >
          <el-menu-item index="4-2"
            ><router-link
              :to="{ name: 'ActivityList', query: { typeId: 2 } }"
              tag="div"
              >精彩活动回顾</router-link
            ></el-menu-item
          >
        </el-submenu>
        <el-menu-item index="5">
          <router-link :to="{ name: 'ApplicationResult' }" tag="div"
            >个人申请查询</router-link
          >
        </el-menu-item>
        <!--     头像-->

        <div class="right-menu" style="margin-left: 80%">
          <el-dropdown style="">
            <span class="el-dropdown-link">
              <el-avatar :src="this.photo" style="margin-top: 10%"></el-avatar>
              <span class="name">{{ this.username }}，你好</span>
            </span>
            <el-dropdown-menu style="">
              <el-dropdown-item>
                <span class="no-underline" @click="skip()">个人信息</span>
              </el-dropdown-item>
              <el-dropdown-item>
                <span @click="logout" class="logout">退出</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-menu>
    </div>
    <!--    轮播图-->
    <div class="carousel">
      <template>
        <el-carousel indicator-position="outside" style="height: 380px">
          <el-carousel-item v-for="(item, index) in images" :key="index">
            <img
              :src="item.url"
              alt="image"
              style="background-size: cover; width: 100%; height: 100%"
            />
          </el-carousel-item>
        </el-carousel>
      </template>
    </div>
    <div class="container">
      <div class="left-container">
        <div>>>社团活动</div>
        <el-collapse v-model="activeName" accordion>
          <el-collapse-item>
            <template slot="title"> 知识分享大会 </template>
            <div>
              活动内容：学术研究社举办的年度活动，邀请校内外专家分享最新科研成果，增强成员学术素养，促进交流。
            </div>
            <div>活动时间：7月11日</div>
            <div>活动地点：科学大会堂</div>
            <div>举办社团: 学术研究社</div>
            <el-button type="success">我要报名</el-button>
          </el-collapse-item>
          <el-collapse-item>
            <template slot="title"> 校园读书会 </template>
            <div>
              活动简介：每月一次的阅读分享活动，参与者可以选择当前热门书籍或经典著作，在每周六晚7点至9点，在图书馆三楼会议室进行深度讨论
            </div>
            <div>活动时间：每月最后一个周六</div>
            <div>活动地点：科学大会堂</div>
            <div>举办社团: “书韵飘香”学生读书社</div>
            <el-button type="success">我要报名</el-button>
          </el-collapse-item>
          <el-collapse-item>
            <template slot="title"> 科技创新大赛 </template>
            <div>
              活动简介：为期两个月的科技创新项目竞赛，团队需提交科学实验、软件设计或机器人作品。报名截止日期为每年5月1日，决赛在6月中旬学校报告厅举行。
            </div>
            <div>活动时间：6月至7月中旬</div>
            <div>活动地点：学术报告厅</div>
            <div>举办社团: “理工先锋”科技协会</div>
            <el-button type="success">我要报名</el-button>
          </el-collapse-item>
          <el-collapse-item>
            <template slot="title"> 艺术文化节 </template>
            <div>
              活动简介：春季的艺术盛事，包括舞蹈表演、绘画展览和音乐演出等。通常在每年4月初到4月底，每周五晚上7点，学校艺术中心舞台上精彩呈现。“艺术之翼”艺术社团负责组织。
            </div>
            <div>活动时间：4月初至4月底</div>
            <div>活动地点：学校艺术中心</div>
            <div>举办社团: “艺术之翼”艺术社团</div>
            <el-button type="success">我要报名</el-button>
          </el-collapse-item>
          <el-collapse-item>
            <template slot="title"> 星辰探索者天文讲座 </template>
            <div>
              活动简介:
              本活动将于每月的第一个周六下午2点，在学校天文馆进行。我们将邀请知名天文学家分享宇宙知识，让大家了解星系、星座等天文奥秘。
            </div>
            <div>活动时间：每月的第一个周六下午2点</div>
            <div>活动地点：学校天文馆</div>
            <div>举办社团: 校园星空探索社</div>
            <el-button type="success" @click="open">我要报名</el-button>
          </el-collapse-item>
          <el-collapse-item>
            <template slot="title"> 音乐狂欢节 </template>
            <div>
              活动简介:
              这是一年一度的校园音乐盛宴，于每年5月的第二个周末，晚上7点开始，在露天广场举行。学生乐团、合唱队将轮番登台表演，热爱音乐的同学不容错过。
            </div>
            <div>活动时间：每年5月的第二个周末</div>
            <div>活动地点：露天广场</div>
            <div>举办社团: 青春旋律音乐社</div>
            <el-button type="success">我要报名</el-button>
          </el-collapse-item>
          <el-collapse-item>
            <template slot="title"> 绿色环保志愿者清理日 </template>
            <div>
              活动简介:
              每季度第一个周日早晨8点，全体环保社成员将在城市公园进行清洁行动，提升公众环保意识，保护环境。
            </div>
            <div>活动时间：每季度第一个周日早晨8点</div>
            <div>活动地点：城市公园</div>
            <div>举办社团: 绿色地球守护者</div>
            <el-button type="success">我要报名</el-button>
          </el-collapse-item>
          <el-collapse-item>
            <template slot="title"> 心理素质拓展训练营 </template>
            <div>
              活动简介:
              学生心理协会在每年暑假期间举办，为期一周，通过团队游戏和研讨会提高学生的心理韧性，增进同学间的友谊。
            </div>
            <div>活动时间：每季度第一个周日早晨8点</div>
            <div>活动地点：城市公园</div>
            <div>举办社团: 心晴成长俱乐部</div>
            <el-button type="success">我要报名</el-button>
          </el-collapse-item>
        </el-collapse>
      </div>
      <div class="right-container">
        <div>>>社团咨询</div>
        <el-collapse v-model="activeName" accordion>
          <el-collapse-item>
            <template slot="title">
              乒乓球社招新啦！让我们一起挥动球拍，领略乒乓球的魅力！</template
            >
            <div>乒乓球社 发布时间：2024-6-21</div>
            <div>
              亲爱的同学们：
              乒乓球社现向全校公开招聘新一届的社员，欢迎对乒乓球运动充满热情，愿意参与并推广这项运动的同学加入我们的大家庭。
            </div>
            <div>
              招聘流程 1.
              提交简历：请将个人简历发送至我们的邮箱pingpang@xm.com）。简历需包括姓名、学号、联系方式及个人简介。
              2.
              面试环节：我们将根据简历筛选出符合条件的候选人进行面试。面试时请携带个人身份证及学生证。
              3.
              培训及考核：面试通过的候选人将参加为期一个月的培训及考核，期间将进行乒乓球技战术训练、活动组织策划及宣传能力培养等。
              4. 录用：培训及考核合格的同学将被正式录用为乒乓球社的成员。
            </div>
          </el-collapse-item>
          <el-collapse-item>
            <template slot="title"
              >篮球社招新啦！让我们一起追逐梦想，挥洒青春！</template
            >
            <div>篮球社 发布时间：2023-12-21</div>
            <div>
              亲爱的同学们，你是否热爱篮球？是否享受在球场上奔跑、跳跃、投篮的激情？现在，篮球社向你发出邀请，让我们一起打造一个充满活力与激情的篮球社！
            </div>
            <div>
              【招新流程】 1. 报名：同学们可在招新现场填写报名表进行报名。 2.
              面试：我们将对报名的同学进行面试，了解你的篮球技能和自我介绍。 3.
              试用：面试通过的同学将进行为期一周的试用，以进一步了解社团活动和团队氛围。
              4. 入社：经过试用后，正式成为篮球社的一员！
            </div>
          </el-collapse-item>
          <el-collapse-item>
            <template slot="title"
              >书法社招新啦！让我们一起挥毫泼墨，领略书法的魅力！</template
            >
            <div>书法社 发布时间：2023-12-21</div>
            <div>
              亲爱的同学们，你是否热爱书法？是否渴望在静谧的时光里，用毛笔在宣纸上挥毫泼墨，感受书法的独特魅力？现在，书法社向你发出邀请，让我们一起踏入书法的殿堂，共同探索书法的奥秘！
            </div>
            <div>
              【招新流程】 1. 报名：同学们可在招新现场填写报名表进行报名。 2.
              面试：我们将对报名的同学进行面试，评估你的书法基础和潜力。 3.
              入社：经过面试通过的同学将成为书法社的试用成员，进行为期一个月的试用期。
              4. 转正：试用期满后，经过评估合格的同学将正式成为书法社的成员。
            </div>
          </el-collapse-item>
          <el-collapse-item>
            <template slot="title"
              >街舞社招新啦！让我们一起舞动青春，展现无限魅力！</template
            >
            <div>书法社 发布时间：2023-12-21</div>
            <div>
              亲爱的同学们，你是否热爱书法？是否渴望在静谧的时光里，用毛笔在宣纸上挥毫泼墨，感受书法的独特魅力？现在，书法社向你发出邀请，让我们一起踏入书法的殿堂，共同探索书法的奥秘！
            </div>
            <div>
              【招新流程】 1. 报名：同学们可在招新现场填写报名表进行报名。 2.
              面试：我们将对报名的同学进行面试，评估你的书法基础和潜力。 3.
              入社：经过面试通过的同学将成为书法社的试用成员，进行为期一个月的试用期。
              4. 转正：试用期满后，经过评估合格的同学将正式成为书法社的成员。
            </div>
          </el-collapse-item>
          <el-collapse-item>
            <template slot="title"
              >英语社招新啦！让我们一起开启英语之旅，拓宽国际视野！</template
            >
            <div>书法社 发布时间：2023-12-21</div>
            <div>
              亲爱的同学们，你是否热爱书法？是否渴望在静谧的时光里，用毛笔在宣纸上挥毫泼墨，感受书法的独特魅力？现在，书法社向你发出邀请，让我们一起踏入书法的殿堂，共同探索书法的奥秘！
            </div>
            <div>
              【招新流程】 1. 报名：同学们可在招新现场填写报名表进行报名。 2.
              面试：我们将对报名的同学进行面试，评估你的书法基础和潜力。 3.
              入社：经过面试通过的同学将成为书法社的试用成员，进行为期一个月的试用期。
              4. 转正：试用期满后，经过评估合格的同学将正式成为书法社的成员。
            </div>
          </el-collapse-item>
          <el-collapse-item>
            <template slot="title"
              >足球社招新啦！让我们一起在绿茵场上奔跑，感受足球的魅力！</template
            >
            <div>书法社 发布时间：2023-12-21</div>
            <div>
              亲爱的同学们，你是否热爱书法？是否渴望在静谧的时光里，用毛笔在宣纸上挥毫泼墨，感受书法的独特魅力？现在，书法社向你发出邀请，让我们一起踏入书法的殿堂，共同探索书法的奥秘！
            </div>
            <div>
              【招新流程】 1. 报名：同学们可在招新现场填写报名表进行报名。 2.
              面试：我们将对报名的同学进行面试，评估你的书法基础和潜力。 3.
              入社：经过面试通过的同学将成为书法社的试用成员，进行为期一个月的试用期。
              4. 转正：试用期满后，经过评估合格的同学将正式成为书法社的成员。
            </div>
          </el-collapse-item>
          <el-collapse-item>
            <template slot="title"
              >音乐社招新啦！让我们一起纵情高歌，唱响青春！</template
            >
            <div>书法社 发布时间：2023-12-21</div>
            <div>
              亲爱的同学们，你是否热爱书法？是否渴望在静谧的时光里，用毛笔在宣纸上挥毫泼墨，感受书法的独特魅力？现在，书法社向你发出邀请，让我们一起踏入书法的殿堂，共同探索书法的奥秘！
            </div>
            <div>
              【招新流程】 1. 报名：同学们可在招新现场填写报名表进行报名。 2.
              面试：我们将对报名的同学进行面试，评估你的书法基础和潜力。 3.
              入社：经过面试通过的同学将成为书法社的试用成员，进行为期一个月的试用期。
              4. 转正：试用期满后，经过评估合格的同学将正式成为书法社的成员。
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
  </div>
</template>

<script>
// 获取token并解析
import router from '@/router'
import decodedToken from '@/api/tokenDecode'
export default {
  data() {
    return {
      username: '',
      photo: '',

      images: [
        {
          url: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.znZBZO--aEtou7eZrHwIKQHaHa?rs=1&pid=ImgDetMain',
        },
        {
          url: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.gfk43SkgkVZwGGLf9wk70QHaDt?rs=1&pid=ImgDetMain',
        },
        {
          url: 'https://ts1.cn.mm.bing.net/th/id/R-C.a44ef8cd13d79d0a4b4008832583b825?rik=DYcAspjKsVXbvA&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f40039%2f9303.jpg_wh300.jpg!%2ffh%2f300%2fquality%2f90&ehk=ZU%2fXF9yzQZumlFfZnVtl8XhgvkaycoXIarakxmF9GBY%3d&risl=&pid=ImgRaw&r=0',
        },
        // 可以根据需要添加更多的图片对象
      ],
    }
  },
  methods: {
    load() {
      this.username = decodedToken().claims.username
      this.photo = decodedToken().claims.photo
    },
    //判断跳转页面
    skip() {
      if (decodedToken().claims.is_president === '是') {
        router.push('/PresidentHome')
      } else {
        router.push('/UserHome')
      }
    },

    logout() {
      //清空session
      localStorage.clear()
      router.push('/login')
    },
  },
  created() {
    this.load() // 刷新当前页面
  },
}
</script>

<style scoped="scoped">
.header-wrap {
  background-color: deepskyblue;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 70px;
}
.phone-nav {
  display: none;
}
.header {
  width: 100%;
  height: 70px;
  line-height: 70px;
  margin: 0 auto;
}

.el-menu.el-menu--horizontal a {
  color: #fff;
}
.rightMenu {
  float: right;
  height: 70px;
  line-height: 70px;
  background-color: #000000;
}
a {
  text-decoration: none;
  color: #eee;
  font-size: 16px;
}

/*用户名*/
.right-menu .name {
  margin-left: 20px;
  color: #eee;
}
/*//轮播图*/
.carousel {
  z-index: -99;
  height: 380px;
  position: relative;
  overflow: hidden;
  padding-top: 80px;
  margin-left: 15%;
  width: 70%;
}

/* 去掉router-link下划线 */
.no-underline {
  text-decoration: none;
  color: inherit; /* 保持原本的文字颜色 */
}
/*活动整体样式*/
.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 70%;
  height: auto;
  margin-left: 15%;
  margin-top: 3%;
}
/*左边活动样式*/
.left-container {
  display: flex;
  flex-direction: column;
  width: 46%;
}
.left-container > div {
  font-size: 20px;
  color: white;
  background-color: #69b3f0;
}
/*右边活动样式*/
.right-container {
  display: flex;
  flex-direction: column;
  width: 46%;
}
.right-container > div {
  font-size: 20px;
  color: white;
  background-color: #69b3f0;
}
</style>
